const { createApp, ref } = Vue;

const mainApp = createApp({
    setup() {
        // 响应式数据
        const currentPage = ref('首页');
        const menuItems = ref([
            { 
                id: 1, 
                name: '首页', 
                icon: '🏠'
            },
            { 
                id: 2, 
                name: '用户管理', 
                icon: '👥',
                children: [
                    { id: 21, name: '用户列表' },
                    { id: 22, name: '角色管理' },
                    { id: 23, name: '权限设置' }
                ]
            },
            { 
                id: 3, 
                name: '数据统计', 
                icon: '📊',
                children: [
                    { id: 31, name: '访问统计' },
                    { id: 32, name: '用户分析' },
                    { id: 33, name: '数据报表' }
                ]
            },
            { 
                id: 4, 
                name: '系统设置', 
                icon: '⚙️',
                children: [
                    { id: 41, name: '基础设置' },
                    { id: 42, name: '安全设置' },
                    { id: 43, name: '日志管理' }
                ]
            }
        ]);

        // 存储展开的菜单ID（只会有一个）
        const expandedMenus = ref(new Set());

        // 选项卡数据
        const tabs = ref([
            { id: 'home', title: '首页', content: '欢迎使用管理系统！', closable: false }
        ]);
        const activeTab = ref('home');

        // 用户信息（实际应用中可能需要从后端获取）
        const userInfo = ref({
            username: '管理员'
        });

        // 退出登录
        const logout = () => {
            // 实际应用中可能需要调用登出API
            window.location.href = 'login.html';
        };

        // 切换菜单展开状态，同时关闭其他菜单
        const toggleMenu = (menuId) => {
            if (expandedMenus.value.has(menuId)) {
                expandedMenus.value.delete(menuId);
            } else {
                // 清空当前所有展开的菜单
                expandedMenus.value.clear();
                // 添加当前点击的菜单
                expandedMenus.value.add(menuId);
            }
        };

        // 检查菜单是否展开
        const isMenuExpanded = (menuId) => {
            return expandedMenus.value.has(menuId);
        };

        // 添加新选项卡
        const addTab = (title, content) => {
            const id = 'tab-' + Date.now();
            tabs.value.push({
                id,
                title,
                content,
                closable: true
            });
            activeTab.value = id;
        };

        // 关闭选项卡
        const closeTab = (tabId) => {
            const index = tabs.value.findIndex(tab => tab.id === tabId);
            if (index !== -1) {
                // 如果关闭的是当前激活的选项卡，则激活前一个选项卡
                if (activeTab.value === tabId) {
                    activeTab.value = index > 0 ? tabs.value[index - 1].id : 'home';
                }
                tabs.value.splice(index, 1);
            }
        };

        // 选择菜单项
        const selectMenuItem = (item) => {
            // 如果菜单项有子菜单，则切换展开状态
            if (item.children) {
                toggleMenu(item.id);
            } else {
                // 没有子菜单则更新当前页面并添加新选项卡
                currentPage.value = item.name;
                
                // 检查是否已存在相同标题的选项卡
                const existingTab = tabs.value.find(tab => tab.title === item.name);
                if (existingTab) {
                    // 如果已存在，则激活该选项卡
                    activeTab.value = existingTab.id;
                } else {
                    // 否则添加新选项卡
                    let content = `这里是${item.name}页面的内容。`;
                    addTab(item.name, content);
                }
            }
        };

        // 返回所有需要在模板中使用的数据和方法
        return {
            currentPage,
            menuItems,
            userInfo,
            logout,
            selectMenuItem,
            isMenuExpanded,
            toggleMenu,
            tabs,
            activeTab,
            closeTab
        };
    }
});

// 挂载应用
mainApp.mount('#mainApp');